<!-- 工厂安全态势简介 -->
<template>
  <el-card class="app-container">
    <div>
      <div class="itemTitle">工厂安全态势简介</div>
      <div class="main">
        <el-form
          :inline="true"
          label-width="120px"
          label-position="right"
          size="small"
          :model="informationForm"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="企业名称">
                <el-input
                  :readonly="readonly"
                  v-model="informationForm.name"
                  style="width: 700px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="企业类型">
                <el-select
                  :readonly="readonly"
                  v-model="informationForm.type"
                  style="width: 700px"
                  placeholder="请选择企业类型"
                >
                  <el-option
                    :readonly="readonly"
                    v-for="(dict, index) in typeList"
                    :key="index"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="企业地址">
                <el-input
                  :readonly="readonly"
                  style="width: 700px"
                  v-model="informationForm.address"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="企业简介">
                <el-input
                  :readonly="readonly"
                  type="textarea"
                  v-model="informationForm.profile"
                  show-word-limit
                  rows="8"
                  style="width: 700px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="企业安全态势">
                <el-input
                  :readonly="readonly"
                  type="textarea"
                  v-model="informationForm.situation"
                  show-word-limit
                  rows="8"
                  style="width: 700px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="!readonly">
            <el-col :span="24">
              <el-form-item label=" ">
                <el-button
                  type="primary"
                  size="small"
                  @click="edit"
                  v-hasPermi="['base:company:edit']"
                  >编辑
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-dialog
        :visible.sync="informationDialog"
        title="工厂安全态势简介"
        :close-on-click-modal="false"
        :append-to-body="true"
        :close-on-press-escape="false"
        :modal="true"
        style="align-items: center"
      >
        <el-form
          ref="addForm"
          :inline="true"
          label-position="right"
          size="small"
          label-width="120px"
          :model="addForm"
          :rules="rules"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="企业名称" prop="name">
                <el-input clearable v-model="addForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业类型" prop="type">
                <el-select v-model="addForm.type" placeholder="请选择企业类型">
                  <el-option
                    v-for="(dict, index) in typeList"
                    :key="index"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="企业地址" prop="address">
                <el-input clearable v-model="addForm.address"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="企业简介" prop="profile">
                <el-input
                  clearable
                  type="textarea"
                  v-model="addForm.profile"
                  rows="3"
                  show-word-limit
                  style="width: 550px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="企业安全态势" prop="situation">
                <el-input
                  clearable
                  type="textarea"
                  v-model="addForm.situation"
                  rows="3"
                  show-word-limit
                  style="width: 550px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button @click="cancel" style="margin-right: 10px"
            >取 消</el-button
          >
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>
<script>
import {
  safetyList,
  updateSafety,
  addSafety,
  getInfo,
} from "@/api/safetyManagement/info/safetyInfo.js";
export default {
  data() {
    return {
      typeList: [],
      rules: {
        name: [
          { required: true, message: "企业名称不能为空", trigger: "blur" },
        ],
        profile: [
          { required: true, message: "企业简介不能为空", trigger: "blur" },
        ],
        situation: [
          { required: true, message: "企业态势不能为空", trigger: "blur" },
        ],
        type: [
          { required: true, message: "企业类型不能为空", trigger: "blur" },
        ],
        address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
      },
      addForm: {}, //编辑
      informationDialog: false, //编辑弹出框
      readonly: true,
      informationForm: {
        name: "",
        type: "",
        address: "",
        profile: "",
        situation: "",
      },
      isEdit: false,
    };
  },
  created() {
    this.getSafety();
    this.getDicts("company_type").then((response) => {
      this.typeList = response.data;
    });
    const { name } = this.$route;
    if (name == "IntroCompany") {
      this.readonly = false;
    } else {
      this.readonly = true;
    }
  },
  methods: {
    // 列表信息
    getSafety() {
      safetyList().then((response) => {
        console.log(this.informationForm);
        if (response.data.length > 0) {
          this.informationForm = response.data[0];
        }
        this.loading = false;
      });
    },
    //编辑
    edit() {
      this.informationDialog = true;
      if (this.informationForm) {
        this.addForm = JSON.parse(JSON.stringify(this.informationForm));
      }
    },
    //确定
    submit() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          if (this.informationForm.id) {
            //调接口
            let params = JSON.parse(JSON.stringify(this.addForm));
            updateSafety(params).then((res) => {
              if (res.code == 200) {
                this.addForm = {};
                this.$message.success("编辑成功");
                this.informationDialog = false;
                this.getSafety();
              }
            });
          } else {
            let params = JSON.parse(JSON.stringify(this.addForm));
            addSafety(params).then((res) => {
              if (res.code == 200) {
                this.addForm = {};
                this.$message.success("新增成功");
                this.informationDialog = false;
                this.getSafety();
              }
            });
          }
        }
      });
    },
    //取消
    cancel() {
      this.informationDialog = false;
      this.addForm = {};
    },
  },
};
</script>

<style>
.main {
  margin: 20px 100px 0 100px;
}
</style>
